<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to SVG</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        #drop-zone {
            border: 2px dashed #ccc;
            border-radius: 20px;
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        #drop-zone.dragover {
            background-color: #e9e9e9;
        }
        #svg-container, #svg-code {
            margin-top: 20px;
        }
        #svg-container {
            max-width: 100%;
            box-sizing: border-box;
            margin: 20px;
        }
        #svg-container svg {
            max-width: 100%;
            height: auto;
        }
        #svg-code {
            width: 100%;
            height: 200px;
        }
        #copy-button {
            margin-bottom: 10px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Image to SVG</h1>
    <p>Using <a href="https://github.com/jankovicsandras/imagetracerjs">imagetracerjs</a> by András Jankovics.</p>
    <div id="drop-zone">
        <p>Drag and drop a JPG or PNG image here, or click to select a file</p>
    </div>
    <input type="file" id="file-input" style="display: none;" accept="image/jpeg, image/png">
    <div id="svg-container"></div>
    <h2>SVG Code:</h2>
    <button id="copy-button">Copy to clipboard</button>
    <textarea id="svg-code" readonly></textarea>

    <script type="module">
        import imagetracerjs from 'https://cdn.jsdelivr.net/npm/imagetracerjs@1.2.6/+esm';

        const dropZone = document.getElementById('drop-zone');
        const fileInput = document.getElementById('file-input');
        const svgContainer = document.getElementById('svg-container');
        const svgCode = document.getElementById('svg-code');
        const copyButton = document.getElementById('copy-button');

        dropZone.addEventListener('click', () => fileInput.click());
        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('dragover');
        });
        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('dragover');
        });
        dropZone.addEventListener('drop', handleDrop);
        fileInput.addEventListener('change', (e) => handleFile(e.target.files[0]));

        copyButton.addEventListener('click', () => {
            navigator.clipboard.writeText(svgCode.value).then(() => {
                copyButton.textContent = 'Copied';
                setTimeout(() => {
                    copyButton.textContent = 'Copy to clipboard';
                }, 1500);
            }).catch(err => {
                console.error('Failed to copy text: ', err);
            });
        });

        function handleDrop(e) {
            e.preventDefault();
            dropZone.classList.remove('dragover');
            const file = e.dataTransfer.files[0];
            if (file && (file.type === 'image/jpeg' || file.type === 'image/png')) {
                handleFile(file);
            }
        }

        function handleFile(file) {
            const reader = new FileReader();
            reader.onload = (e) => {
                const img = new Image();
                img.onload = () => convertToSVG(img);
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }

        function convertToSVG(img) {
            const canvas = document.createElement('canvas');
            canvas.width = img.width;
            canvas.height = img.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0);
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

            const svgString = imagetracerjs.imagedataToSVG(imageData, {viewbox: true});
            
            svgContainer.innerHTML = svgString;
            svgCode.value = svgString;
        }
    </script>
</body>
</html>
